<template>
    <view>
        <view class="bjImg" :style="[{height:CustomBar + 'px',backgroundImage:'url('+imgBj+')'}]"></view>
        <view class="cu-custom" :style="[{height:CustomBar + 'px',}]"
              :class="{boxShadow:boxShadow}">
            <view class="cu-bar fixed"
                  :style="{height:CustomBar+'px',paddingTop:StatusBar+'px',backgroundColor:xbgColor}"
                  :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
                <view class="action" @tap="skipHome" v-if="share">
                    <text class="cuIcon-back" :class="{backColora:backColor}" :style="{color: fhColor}"></text>
                    <!-- <image style="width: 50rpx;height: 50rpx;" :src="imgUrl+'/static/cardHomePage/cardHome.png'"> -->
                    <!--                    <slot name="backText"></slot>-->
                </view>
                <view class="action actionYs" @tap="BackPage" v-if="isBack">
                    <view class="tmYuanBj" v-if="publicBackBj"></view>
                    <text class="cuIcon-back" :class="{backColora:backColor,'cuIcon-backYs':publicBackBj}"
                          :style="{color: fhColor}"></text>
                    <slot name="backText"></slot>
                </view>
                <!-- 返回带promise -->
                <view class="action" @tap="BackPagea" v-if="isBacka">
                    <text class="cuIcon-back" :class="{backColora:backColor}" :style="{color: fhColor}"></text>
                    <!-- <slot name="backText"></slot> -->
                </view>
                <view class="content"
                      :style="[{top:StatusBar + 'px',color:textColor,fontWeight:textWeight,fontSize:textSize+'px'}]">
                    <slot name="content"></slot>
                </view>
                <!-- <view class="content" :style="[{top:StatusBar + 'px'}]" style="display: flex;justify-content: flex-end;">
                    <slot name="screen"></slot>
                </view> -->
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script>
import {
    eventBus
} from '../../static/lib/eventBus.js'

export default {
    data() {
        return {
            StatusBar: this.StatusBar,
            CustomBar: this.CustomBar,
            imgUrl: this.$http.imgUrl,
            searchLike: '',
            isSearcha: false,
            focus: false,
            gameId: uni.getStorageSync('gameId')
        };
    },
    name: 'cu-custom',
    computed: {
        style() {
            var StatusBar = this.StatusBar;
            var CustomBar = this.CustomBar;
            var bgImage = this.bgImage;
            var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
            if (this.bgImage) {
                style = `${style}background-image:url(${bgImage});`;
            }
            return style
        }
    },
    props: {
        // 图片标题开关
        imgTitle: {
            type: [Boolean, String],
            default: false
        },
        // 图片标题路径
        imgTitleText: {
            type: String,
            default: ''
        },
        // 通用返回背景
        publicBackBj: {
            type: [Boolean, String],
            default: false
        },
        // 标题颜色
        textColor: {
            type: String,
            default: '#fff'
        },
        // 返回箭头颜色
        fhColor: {
            type: String,
            default: '#fff'
        },
        // 背景图片
        imgBj: {
            type: String,
            default: ''
        },

        bgColor: {
            type: String,
            default: ''
        },
        xbgColor: {
            type: String,
            default: ''
        },
        isBack: {
            type: [Boolean, String],
            default: false
        },
        isBacka: {
            type: [Boolean, String],
            default: false
        },
        isSearch: {
            type: [Boolean, String],
            default: false
        },
        bgImage: {
            type: String,
            default: ''
        },
        backColor: {
            type: [Boolean, String],
            default: false
        },
        share: {
            type: [Boolean, String],
            default: false
        },
        emptysearchLike: {
            type: [Boolean, String],
            default: false
        },
        // 标题文字粗细
        textWeight: {
            type: [String, Boolean],
            default: false
        },
        // 标题文字大小
        textSize: {
            type: [String, Boolean],
            default: false
        },
        // 是否显示阴影
        boxShadow: {
            type: [Boolean],
            default: false
        },
	
    },
    created() {
        const that = this
        if (this.isSearch) {
            eventBus.$off('gbSearch')
            eventBus.$on('gbSearch', res => {
                that.isSearcha = res
            })
        }
    },
    methods: {
        // 返回上级
        BackPage() {
            uni.navigateBack({
                delta: 1
            });
        },

        BackPagea() {
            this.$emit('goBack')
        },

        // 返回主页
        skipHome() {
            uni.redirectTo({
                url: '../../pages/cardIndex/cardIndex?pageCur=cardHomePage'
            })
        },

        // 搜索值
        searchValbtn() {
            this.focus = true
            this.isSearcha = true
            this.$emit('searchTck', this.isSearcha)
            this.searchLike = ''
        },

        screenBtn() {
            this.$emit('searchLike', this.searchLike)
            this.isSearcha = false
            this.$emit('searchTck', this.isSearcha)

            this.searchLike = ''
        }
    },
    watch: {
        emptysearchLike(o) {
            this.searchLike = ''
        }
    },
}
</script>

<style lang="scss" scoped>
.bjImg {
  display: block;
  position: fixed;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  z-index: 9998;
}

.boxShadow {
  box-shadow: 0rpx 15rpx 15rpx 0rpx rgba(153, 153, 153, 0.12);
}

.imgBjYs {
  background-size: 100% 100%;
}

.WSsty {
  .colora {
    background-color: #00A0E9;
  }
}

.OPCGsty {
  .colora {
    background-color: #EEB250;
  }
}

.KALEsty {
  .colora {
    background-color: #901d25;
  }
}

.colora {
  background-color: #d60909;
}

.colorgg {
  background: linear-gradient(0deg, #3B76EE, #58B6FB);
}

.colorb {
  background-color: #d1a779;
}

.actionYs {
  position: relative;
  font-weight: 700;
	// &.action:first-child{
	// 	font-size: 40rpx;
	// }
  .tmYuanBj {
    width: 48rpx;
    height: 48rpx;
    background: #000;
    border-radius: 50%;
    opacity: .2;
    position: absolute;
    left: 8rpx;
  }

  .cuIcon-backYs {
    position: absolute;
    left: 24rpx;

  }
}

.cuIcon-back:before {
  color: inherit;
  font-size: 35rpx;
}

.backColora:before {
  color: #000;
}

/* 搜索 */
.creenWrap {
  background-color: #FFFFFF;
  min-width: 69rpx;
  height: 55rpx;
  border-radius: 28rpx;
  margin-right: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;

  .img {
    width: 27rpx !important;
    height: 27rpx !important;
  }

  .text {
    font-size: 28rpx;
    margin-left: 10rpx;
  }
}

.openSearch {
  display: flex;
  border-radius: 33rpx;
  align-items: center;
  background-color: #FFFFFF;
  margin-left: 18rpx;
  padding: 0 21rpx;
  width: 100%;
  height: 55rpx;

  .img {
    width: 27rpx !important;
    height: 27rpx !important;
    margin-right: 26rpx;
  }

  .val {
    width: 100%;
    font-size: 25rpx;

    color: #999;
    flex: 1;
  }
}

.content {
  font-size: 32rpx;
  font-weight: 400;
  color: #1B1B2A;
  display: flex;
  justify-content: center;
  align-items: center;

  .imgTitle {
    height: 50rpx !important;
    width: 106rpx;
  }
}
</style>